<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { getMap } from "../api";
let warp = ref("");

let list = (name, adcode) => {
  getMap(adcode).then((res) => {
    let boxss: any = document.querySelector(".boxss");
    var myChart = echarts.init(boxss);
    echarts.registerMap("CH", res.data);
    console.log(res);
    let option = {
      series: [
        {
          name: name,
          layoutCenter: ["50%", "50%"],
          layoutSize: '100%',
          type: "map",
          map: "CH",
          label: {
            show: true,
          },
          data: res.data.features.map((item: any) => {
            return {
              adcode: item.adcode,
              value: item.childrenNum,
              name: item.name,
            };
          }),
        },
      ],
    };
    myChart.setOption(option);
  });
};

onMounted(() => {
  list("中华人民共和国", 100000);
});
</script>
<template>
  <div ref="warp" style="width: 100%; height: 100%" class="boxss"></div>
</template>

<style>
.boxss{
  width: 100%;
  height: 100%;
}
</style>